<template>
    <div class="app-container">
      <el-form label-width="120px">
        <el-form-item label="类型名称">
          <el-input v-model="category.name" />
        </el-form-item>

        <el-form-item>
          <el-button
            :disabled="saveBtnDisabled"
            type="primary"
            @click="saveOrUpdate"
          >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
  import article from '../../../api/article/article'

  export  default {
    data(){
      return{
        category:{},
        saveBtnDisabled:false,//保存按钮是否禁用
      }
    },
    created() {
      this.init();
    },
    watch:{
      $route(to,from){//路由变化方式
        this.init();
      }
    },
    methods:{
      init(){
        if(this.$route.params&&this.$route.params.id){
          const id = this.$route.params.id
          this.getInfo(id);
        }
        else{
          this.category = {};
        }
      },
      getInfo(id){
        article.getCategoryById(id)
        .then(response=>{
          this.category = response.data.category
        })
      },
      saveOrUpdate(){
        if(!this.category.id){
          //添加
          this.saveCategory();
        }else{
          //修改
          this.updateCategory();
        }

      },
      //新增文章类型的方法
      saveCategory(){
        article.addArticleCategory(this.category)
        .then(resp=>{
          //提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          //回到列表页面  路由跳转
          this.$router.push({path:'/article/categoryList'})
        })
      },
      //修改文章类型的方法
      updateCategory(){
        article.updateArticleCategory(this.category)
        .then(response=>{
          //提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          //回到列表页面  路由跳转
          this.$router.push({path:'/article/categoryList'})
        })
      },

    }
  }
</script>
